<template>
  <div>
  
  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="学生学号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="学生姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="学生性别"
      :formatter="formatter"
      width="100">
    </el-table-column>
    <el-table-column
      prop="class"
      label="学生签到课程"
      :formatter="formatter"
      width="120"
      >
    </el-table-column>
        <el-table-column
      prop="date1"
      label="签到日期"
      sortable
      width="250"
      
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
        <el-table-column
      prop="date2"
      label="签退日期"
      sortable
      width="250"
      
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
        <el-table-column
      prop="class"
      label="签到进度(总次数)"
      :formatter="formatter"
      width="250"
      >
  
    </el-table-column>
    <el-table-column
      prop="tag"
      label="签到记录"
      width="100"
      :filters="[{ text: '已签到', value: '已签到' }, { text: '未签到', value: '未签到' },]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '已签到' ? 'success' : 'danger'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id:'001',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'002',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',  
          tag: '已签到'
        }, {
          id:'003',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'004',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'005',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'006',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '未签到'
        }, {
          id:'007',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'008',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'009',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '未签到'
        }, {
          id:'010',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '缺勤'
        }, {
          id:'011',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '已签到'
        }, {
          id:'012',
          date1: '2016-05-02',
          date2: '2016-05-02',
          name: '王小虎',
          sex: '男',
          class:'高数',
          tag: '请假'
        }
        ]
      }
    },
    methods: {

      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    
        
      
    }
  }
</script>

<style lang="less" scoped>


</style>


